
<template>
  <div id="fs">
    <div class="wapper"></div>
    <div class="fs-content">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-row :gutter="0">
            <el-col :span="24">
              <div id="weather-box">
                <p>
                  2018年12月12号 星期三
                  <span class="weather-icon"></span>
                </p>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="0">
            <el-col :span="24">
              <div class="char-height chart-width" id="info-box">
                <div class="chart-card">
                  <div class="chart-header" style="padding-top:0">基本信息</div>
                  <div class="chart-sub-header clearfix">
                    <span class="info-title">永</span>
                    <p style="line-height:1.2;margin:3px ;">永修县</p>
                    <p style="font-size:1em;line-height:1.2;margin:0;">YongXiu County</p>
                    <p
                      class="info-floor2"
                    >永修县，江西省九江市下辖县。位于江西省北部，九江市南部，昌九工业走廊中段，南邻南昌市，东频鄱阳湖，西倚云居山，北与庐山市、共青城市、德安县、武宁县接壤</p>
                  </div>
                  <div class="chart-content">
                    <el-row :gutter="0">
                      <el-col :span="12">建宁面积 : 1724.3k㎡</el-col>
                      <el-col :span="12">总农户数 : 39804户</el-col>
                    </el-row>
                    <el-row :gutter="0">
                      <el-col :span="12">人&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;口 : 14.33万</el-col>
                      <el-col :span="12">总年产值 : 7543万</el-col>
                    </el-row>
                    <el-row :gutter="0">
                      <el-col :span="12">新政编码 : 350344</el-col>
                      <el-col :span="12">种植面积 : 47.3k㎡</el-col>
                    </el-row>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="0">
            <el-col :span="24">
              <div class="char-height chart-width">
                <div class="chart-card no-padding">
                  <div class="chart-header no-margin">二十四节气降水量分布图</div>
                  <div class="chart-content">
                    <div class="canvas-box" ref="polarChart"></div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="0">
            <el-col :span="24">
              <div class="char-height chart-width">
                <div class="chart-card no-padding">
                  <div class="chart-header no-margin">光照</div>
                  <div class="chart-content">
                    <div class="canvas-box" ref="scatterChart"></div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row :gutter="0">
            <div id="mainTitle">
              <div class="main-title-bg"></div>
              <p class="title-name">永修县高准农田信息总控台</p>
            </div>
          </el-row>
          <el-row :gutter="0">
            <el-col :span="24">
              <div id="map-box" ref="mapBox">
                <div id="baiduMapContainer"></div>
              </div>
              <div id="map_box_bg"></div>
              <!-- <svg xmlns="http://www.w3.org/2000/svg" class="leaflet-zoom-animated" width="100%" height="100%" viewBox="-160 -163 2000 1000" style=" position: absolute;top: -4px;left: 0; " stroke="#fff">
                <g>
                      <path stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" stroke="#fff" stroke-opacity="1" stroke-width="1" fill="transparent" fill-opacity="0" class="leaflet-clickable" d="M695 164L701 170L712 169L714 175L720 178L727 175L732 177L729 183L730 193L733 203L740 213L739 218L744 224L739 241L729 261L728 273L752 300L756 308L765 313L769 332L790 328L791 334L794 338L793 347L807 359L818 365L821 371L829 378L847 378L861 371L869 363L869 361L865 358L863 349L872 341L869 338L862 336L859 330L862 329L866 333L869 332L870 320L877 309L882 312L883 329L891 340L899 339L901 341L902 347L911 349L916 353L925 354L916 368L919 374L922 376L935 377L938 375L938 369L945 364L947 364L953 373L961 374L978 370L988 361L988 353L994 342L990 342L990 340L998 327L1000 304L1003 307L1005 316L999 331L1001 341L1002 342L1006 328L1011 324L1015 325L1020 331L1020 335L1009 350L1023 364L1037 348L1049 327L1058 318L1076 319L1098 326L1105 323L1121 312L1130 302L1136 277L1137 265L1132 253L1121 240L1098 222L1089 212L1083 199L1083 185L1086 180L1107 160L1147 136L1152 131L1166 126L1179 158L1203 190L1217 205L1232 215L1335 241L1349 242L1387 238L1417 240L1427 243L1438 250L1457 266L1469 297L1471 341L1470 346L1409 409L1354 427L1294 420L1264 427L1236 424L1234 432L1227 436L1195 429L1163 452L1165 446L1164 443L1158 443L1157 449L1159 454L1150 464L1141 465L1139 472L1133 473L1128 476L1125 467L1113 458L1113 447L1117 444L1110 443L1107 437L1104 445L1097 451L1095 459L1090 464L1084 475L1079 475L1076 473L1073 467L1073 457L1070 456L1040 463L1032 469L1022 469L1012 474L1008 469L999 467L998 473L994 475L987 484L987 492L978 496L978 503L987 523L977 542L968 568L964 573L948 579L937 590L930 610L917 638L895 674L867 678L844 673L840 675L839 681L848 713L848 720L846 730L843 735L834 740L832 748L834 767L833 774L823 779L809 791L795 790L783 793L771 791L758 803L753 802L746 796L744 782L738 772L723 759L719 741L707 738L703 740L703 755L699 760L695 762L690 761L676 754L665 755L657 752L640 749L633 752L627 744L615 742L612 734L613 729L619 724L627 721L633 722L638 718L639 712L636 710L639 704L637 699L632 700L629 712L624 716L618 717L615 711L607 709L602 714L595 710L591 711L584 720L571 709L565 711L555 708L552 703L550 693L552 692L543 683L516 681L502 675L485 674L477 672L460 655L435 622L404 595L392 593L385 594L348 607L337 613L334 604L329 602L332 586L329 580L321 580L310 574L301 574L295 565L292 565L283 554L285 545L291 541L296 533L296 524L271 514L270 505L266 499L269 492L271 478L293 460L297 452L298 432L279 371L272 359L267 340L267 326L262 323L251 324L241 317L245 304L251 297L248 273L246 269L241 273L239 270L242 257L245 256L250 248L251 228L239 180L227 150L226 145L228 144L229 137L228 131L231 123L222 92L225 89L241 86L237 80L234 79L229 80L220 78L217 81L213 65L208 56L208 50L213 33L225 24L230 30L299 61L303 67L305 81L311 85L321 85L330 79L354 82L362 89L368 91L406 96L449 109L497 103L507 106L518 106L557 100L568 102L578 114L590 133L617 137L623 135L642 144L646 161L654 175L693 162z"/>
                </g>
              </svg>-->
            </el-col>
          </el-row>
          <el-row :gutter="0">
            <el-col :span="24">
              <div class="char-height chart-width">
                <div class="chart-card no-padding">
                  <div class="chart-header no-margin">田块信息</div>
                  <div class="chart-content">
                    <ul id="table-list">
                      <li class="title-row">
                        <div class="list-col">基地</div>
                        <div class="list-col">田块</div>
                        <div class="list-col">种植作物</div>
                        <div class="list-col">所属单位</div>
                        <div class="list-col">起止周期</div>
                        <div class="list-col">生长进度</div>
                      </li>
                      <div class="scroll-li-container">
                        <li>
                          <div class="list-col">
                            <span class="index-icon">1</span>基地1
                          </div>
                          <div class="list-col">田块1</div>
                          <div class="list-col">大豆</div>
                          <div class="list-col">修水县农业局</div>
                          <div class="list-col">2018-12 2019-12</div>
                          <div class="list-col">
                            <progress max="100" :value="100"></progress>
                          </div>
                        </li>
                        <li>
                          <div class="list-col">
                            <span class="index-icon">2</span>基地2
                          </div>
                          <div class="list-col">田块2</div>
                          <div class="list-col">大豆</div>
                          <div class="list-col">修水县农业局</div>
                          <div class="list-col">2018-12 2019-12</div>
                          <div class="list-col">
                            <progress max="100" :value="90"></progress>
                          </div>
                        </li>
                        <li>
                          <div class="list-col">
                            <span class="index-icon">3</span>基地3
                          </div>
                          <div class="list-col">田块1</div>
                          <div class="list-col">大豆</div>
                          <div class="list-col">修水县农业局</div>
                          <div class="list-col">2018-12 2019-12</div>
                          <div class="list-col">
                            <progress max="100" :value="80"></progress>
                          </div>
                        </li>
                        <li>
                          <div class="list-col">
                            <span class="index-icon">4</span>基地5
                          </div>
                          <div class="list-col">田块1</div>
                          <div class="list-col">大豆</div>
                          <div class="list-col">修水县农业局</div>
                          <div class="list-col">2018-12 2019-12</div>
                          <div class="list-col">
                            <progress max="100" :value="30"></progress>
                          </div>
                        </li>
                        <li>
                          <div class="list-col">
                            <span class="index-icon">5</span>基地5
                          </div>
                          <div class="list-col">田块1</div>
                          <div class="list-col">大豆</div>
                          <div class="list-col">修水县农业局</div>
                          <div class="list-col">2018-12 2019-12</div>
                          <div class="list-col">
                            <progress max="100" :value="10"></progress>
                          </div>
                        </li>
                      </div>
                    </ul>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row :gutter="0">
            <el-col :span="24">
              <div id="notice-box">
                <div class="notice-bg">
                  <ul class="notic-container">
                    <li>
                      <span class="notice-icon"></span>关于食品质量安全监测平台大数据抽查方案
                    </li>
                    <li>
                      <span class="notice-icon"></span>关于食品质量安全监测平台大数据抽查方案
                    </li>
                    <li>
                      <span class="notice-icon"></span>关于食品质量安全监测平台大数据抽查方案
                    </li>
                    <li>
                      <span class="notice-icon"></span>关于食品质量安全监测平台大数据抽查方案
                    </li>
                    <li>
                      <span class="notice-icon"></span>关于食品质量安全监测平台大数据抽查方案
                    </li>
                  </ul>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="0">
            <el-col :span="24">
              <div class="char-height chart-width fix-height">
                <div class="chart-card no-padding">
                  <div class="chart-header no-margin" style="margin-top:0">预警信息处理情况</div>
                  <div class="chart-content">
                    <div class="canvas-box" ref="noticChart"></div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="0">
            <el-col :span="24">
              <div class="char-height chart-width">
                <div class="chart-card no-padding">
                  <div class="chart-header no-margin" style="margin-top:0">知识库学习情况</div>
                  <div class="chart-content">
                    <div class="canvas-box" ref="entyChart"></div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="0">
            <el-col :span="24">
              <div class="char-height chart-width">
                <div class="chart-card no-padding">
                  <div class="chart-header no-margin">基地农作物总体健康指数</div>
                  <div class="chart-content">
                    <div class="canvas-box" ref="weatherChart"></div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
var echarts = require("echarts");
var bmap = require("echarts/extension/bmap/bmap");
import { styleJson } from "./bmapstyle";
import {
  scatterOption,
  polarOption,
  BMapOption,
  gaugeOption,
  entyOption,
  noticOption,
  TKData,
  yxPolygonsBoundaries
} from "./chartMock";
export default {
  data() {
    return {
      heightunit: 0,
      scatterChartInstance: null,
      polarChartInstance: null,
      mapBoxInstance: null,
      weatherChartInstance: null,
      entyChartInstance: null,
      noticCahrtInstance: null
    };
  },
  methods: {
    initScatterChart() {
      this.$refs.scatterChart.style.height =
        (window.innerHeight - 346) / 2 + "px";
      this.scatterChartInstance = echarts.init(this.$refs.scatterChart);
      this.scatterChartInstance.setOption(scatterOption);
    },
    initPolarChart() {
      this.$refs.polarChart.style.height =
        (window.innerHeight - 346) / 2 + "px";
      this.polarChartInstance = echarts.init(this.$refs.polarChart);
      this.polarChartInstance.setOption(polarOption);
    },
    initMapBox() {
      echarts.registerMap("tk", TKData);
      this.$refs.mapBox.style.height =
        (window.innerHeight - 346) / 2 + 213 + "px";
      // (window.innerHeight - 120) * 0.6 + "px";
      this.$refs.mapBox.style.width =
        (((window.innerHeight - 346) / 2 + 208) * 964) / 620 + "px";
      // this.mapBoxInstance = echarts.init(this.$refs.mapBox);
      // this.mapBoxInstance.setOption(BMapOption);
      this.initBaiduMap();
    },
    initBaiduMap() {
      var map = new BMap.Map("baiduMapContainer"); // 创建Map实例
      map.centerAndZoom(new BMap.Point(115.823418, 29.053464), 15); // 初始化地图,设置中心点坐标和地图级别
      //添加地图类型控件
      map.addControl(
        new BMap.MapTypeControl({
          mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
        })
      );
      map.setCurrentCity("永修"); // 设置地图显示的城市 此项是必须设置的
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
      map.setMapStyle({ style: "midnight" });
      map.clearOverlays(); //清除地图覆盖物
      let pointArray = [];
      let count = yxPolygonsBoundaries.length;
      for (let i = 0; i < count; i++) {
        var ply = new BMap.Polygon(yxPolygonsBoundaries[i], {
          strokeWeight: 2,
          strokeColor: "#fff"
        }); //建立多边形覆盖物
        map.addOverlay(ply); //添加覆盖物
        pointArray = pointArray.concat(ply.getPath());
      }
      map.setViewport(pointArray); //调整视野
      // map.setMapStyleV2({ styleJson: styleJson });
    },
    initWeatherChart() {
      this.$refs.weatherChart.style.height =
        (window.innerHeight - 346) / 2 + "px";
      this.weatherChartInstance = echarts.init(this.$refs.weatherChart);
      this.weatherChartInstance.setOption(gaugeOption);
    },
    initEntyChart() {
      this.$refs.entyChart.style.height = (window.innerHeight - 346) / 2 + "px";
      this.entyChartInstance = echarts.init(this.$refs.entyChart);
      this.entyChartInstance.setOption(entyOption);
    },
    initNoticChart() {
      this.noticCahrtInstance = echarts.init(this.$refs.noticChart);
      this.noticCahrtInstance.setOption(noticOption);
    },
    getTKList() {
      this.$http({
        url: this.$http.adornUrl("/gbznt-api/sys/dept/areaList"),
        method: "get"
      }).then(res => {
        console.dir(res);
      });
    }
  },
  beforeCreate() {},
  mounted() {
    this.initScatterChart();
    this.initPolarChart();
    this.initMapBox();
    this.initWeatherChart();
    this.initEntyChart();
    this.initNoticChart();
    this.getTKList();
  },
  destroyed() {
    if (this.polarChartInstance) {
      this.polarChartInstance.dispose();
      this.polarChartInstance = null;
    }
    if (this.scatterChartInstance) {
      this.scatterChartInstance.dispose();
      this.scatterChartInstance = null;
    }
    if (this.mapBoxInstance) {
      this.mapBoxInstance.dispose();
      this.mapBoxInstance = null;
    }
    if (this.weatherChartInstance) {
      this.weatherChartInstance.dispose();
      this.weatherChartInstance = null;
    }
    if (this.entyChartInstance) {
      this.entyChartInstance.dispose();
      this.entyChartInstance = null;
    }
    if (this.noticCahrtInstance) {
      this.noticCahrtInstance.dispose();
      this.noticCahrtInstance = null;
    }
  }
};
</script>



<style lang="scss">
.chart-width {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.char-height {
  min-height: 250px;
}
.fix-height {
  min-height: 230px;
  height: 230px;
  .canvas-box {
    height: 194px;
  }
}
.canvas-box {
  width: 100%;
  height: 250px;
}
.chart-card {
  padding: 1em;
  &.no-padding {
    margin: 0;
    padding: 0;
  }
  .chart-header {
    padding: 1em 0;
    font-size: 1.6em;
    &.no-margin {
      margin: 0;
      padding: 0;
      margin-top: 0.5em;
      margin-bottom: 0.5em;
    }
  }
  .chart-sub-header {
    .info-title {
      margin-right: 5px;
      font-size: 2.5em;
      font-family: cursive;
      float: left;
      text-align: center;
      width: 33px;
      height: 33px;
      line-height: 33px;
      background: url(~@/assets/img/title_bg.png) center center;
      background-color: rgba(8, 46, 66, 0.8);
      background-size: cover;
    }
    .info-floor2 {
      color: #02c0c2;
      line-height: 1.6em;
      width: 100%;
      word-break: break-all;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      padding-right: 1em;
    }
  }
  .chart-content {
    line-height: 1.8em;
  }
}
#fs {
  width: 100%;
  height: 100%;
  font-size: 10px;
  position: absolute;
  color: #fff;
  min-width: 1360px;
  .wapper {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(~@/assets/img/bg_01.png) center center;
    background-size: cover;
    z-index: 1;
  }
  .fs-content {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
  }
}
#weather-box {
  font-size: 1.4em;
  min-height: 50px;
  padding-top: 10px;
  > p {
    margin: 0 auto;
    width: 200px;
    line-height: 1em;
    > span {
      display: inline-block;
      width: 22px;
      height: 15px;
      background: url(~@/assets/img/weather.png) no-repeat;
      background-size: cover;
    }
  }
}
#notice-box {
  font-size: 1.4em;
  min-height: 50px;
  padding-top: 10px;
  ul,
  li {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .notice-bg {
    margin: 0 auto;
    width: 300px;
    height: 20px;
    overflow: hidden;
    line-height: 20px;
    vertical-align: middle;
    .notic-container {
      animation: 10s lunbo5keyframes linear infinite;
      transform: translateY(-20px);
      li {
        height: 20px;
        cursor: pointer;
      }
    }
    .notice-icon {
      display: inline-block;
      width: 18px;
      height: 18px;
      line-height: 20px;
      margin-right: 5px;
      vertical-align: middle;
      background: url(~@/assets/img/warning_icon.png) no-repeat;
      background-size: contain;
    }
  }
}
#info-box {
  min-height: 230px;
  height: 230px;
  overflow-y: hidden;
}
#mainTitle {
  width: 520px;
  margin: 0 auto;
  height: 100px;
  background: url(~@/assets/img/main_title_bg.png) no-repeat;
  background-size: contain;
  position: relative;
  .main-title-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(~@/assets/img/main_title_bg02.png) no-repeat;
    background-size: contain;
    opacity: 0.08;
    z-index: 1;
  }
  .title-name {
    position: absolute;
    text-align: center;
    width: 400px;
    top: 50%;
    left: 50%;
    margin-left: -200px;
    margin-top: -22px;
    font-size: 3em;
    font-weight: 900;
    z-index: 2;
    cursor: default;
  }
}
#map-box {
  padding: 1em 2em;
  height: 450px;
  width: 700px;
  margin-left: auto;
  margin-right: auto;
  background: url(~@/assets/img/map_contain_bg.png) no-repeat;
  background-size: contain;
  position: relative;
  &:before {
    content: "";
    padding: 1em 2em;
    position: absolute;
    top: -4px;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(~@/assets/img/map_contain_bg2.png) no-repeat;
    background-size: contain;
    opacity: 0.7;
    z-index: 0;
  }
  &:after {
    content: "";
    padding: 1em 2em;
    position: absolute;
    top: -4px;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(~@/assets/img/yx_bg.png) no-repeat center center;
    background-size: 50%;
    opacity: 0.7;
    z-index: -1;
  }
  .leaflet-zoom-animated {
    width: 100%;
    height: 100%;
  }
}
#baiduMapContainer {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}
#table-list {
  margin: 0;
  padding: 0;
  list-style: none;
  .scroll-li-container {
    clear: both;
    min-height: 200px;
    overflow-y: auto;
    > li {
      &:nth-child(1) {
        .index-icon {
          background-color: #f34d4e;
        }
      }
      &:nth-child(2) {
        .index-icon {
          background-color: #a96237;
        }
      }
      &:nth-child(3) {
        .index-icon {
          background-color: #16739a;
        }
      }
    }
  }
  li {
    &.title-row {
      font-size: 16em;
      font-weight: 900;
      .list-col {
        line-height: 2em;
      }
    }
    .list-col {
      float: left;
      font-size: 14px;
      text-align: center;
      line-height: 3em;
      position: relative;
      .index-icon {
        position: absolute;
        width: 16px;
        height: 16px;
        top: 14px;
        left: 0;
        line-height: 1.2;
        text-align: center;
        color: #fff;
        background-color: #747574;
      }
      &:first-child {
        box-sizing: border-box;
        width: 10%;
        text-align: left;
        padding-left: 20px;
      }
      &:nth-child(2) {
        width: 10%;
      }
      &:nth-child(3) {
        width: 14%;
      }
      &:nth-child(4) {
        width: 14%;
      }
      &:nth-child(5) {
        width: 26%;
      }
      &:nth-child(6) {
        width: 26%;
      }
    }
  }
}

@keyframes lunbo5keyframes {
  0% {
    transform: translateY(0px);
  }
  5% {
    transform: translateY(-20px);
  }
  25% {
    transform: translateY(-20px);
  }
  30% {
    transform: translateY(-40px);
  }
  50% {
    transform: translateY(-40px);
  }
  55% {
    transform: translateY(-60px);
  }
  75% {
    transform: translateY(-60px);
  }
  80% {
    transform: translateY(-80px);
  }
  100% {
    transform: translateY(-80px);
  }
}
@-webkit-keyframes lunbo5keyframes {
  0% {
    transform: translateY(0px);
  }
  5% {
    transform: translateY(-20px);
  }
  25% {
    transform: translateY(-20px);
  }
  30% {
    transform: translateY(-40px);
  }
  50% {
    transform: translateY(-40px);
  }
  55% {
    transform: translateY(-60px);
  }
  75% {
    transform: translateY(-60px);
  }
  80% {
    transform: translateY(-80px);
  }
  100% {
    transform: translateY(-80px);
  }
}
.anchorBL{
  display: none;
}
</style>
